<template>
  <div class="login">
    <!--登录框周围圆-->
    <div class="circular" style="--x:0"></div>
    <div class="circular" style="--x:1"></div>
    <div class="circular" style="--x:2"></div>
    <div class="circular" style="--x:3"></div>
    <div class="circular" style="--x:4"></div>
    <el-form ref="loginFrom" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
      <h3 class="loginTitle">管理系统</h3>
      <el-form-item prop="account" label="账 号：">
        <el-input clearable v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密  码：">
        <el-input clearable v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 80%">
        </el-input>
      </el-form-item>
      <el-form-item prop="verification" label="验证码:">
        <el-input clearable v-model="addAndEditFormData.verification" placeholder="请输入验证码" style="width: 40%">
        </el-input>
        <img id="img" @click="getVerification" :src="imgSrc" alt="验证码" title="点击更换验证码" />
      </el-form-item>
      <el-checkbox class="rememberMe" v-model="rememberMe">记住我</el-checkbox>
      <el-form-item>
        <el-button type="primary" @click="handleConfirmEvent" style="width: 100%">
          <i class="el-icon-upload"></i> 登 录
        </el-button>
      </el-form-item>
      <div class="navigate">
        <span>还没有账号？<router-link to="/register">去注册</router-link></span>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        addAndEditFormData: {
          account: "",
          password: "",
          verification: ""
        },
        rememberMe: true,
        imgSrc: "/api/getVerify?temp=" + new Date(),
        message: "",
        addAndEditRules: {
          account: {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          },
          password: {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          verification: {
            required: true,
            message: "验证码不能为空",
            trigger: "blur"
          }
        }
      };
    },
    created() {
      let item = localStorage.getItem("Authorization");
      if (item !== null){
        this.$router.push({
          path: "/manager"
        });
      }
    },
    methods: {
      getVerification() {
        this.imgSrc = "/api/getVerify?temp=" + +new Date();
      },
      handleConfirmEvent() {
        this.$refs.loginFrom.validate(valid => {
          if (valid) {
            let params = {
              account: this.addAndEditFormData.account,
              password: this.addAndEditFormData.password,
              verification: this.addAndEditFormData.verification
            };
            this.api.postApi("/login", params).then(e => {
              if (e.data.code === 200) {
                localStorage.setItem("Authorization", e.data.data.authorization);
                this.$store.commit("userInfo", e.data.data);
                this.$router.push({
                  path: "/manager"
                });
              }
            });
          }
        });
      }
    }
  };
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.login {
  position: relative;
  background-image: url("../assets/img/2.jpg");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.circular {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  filter: hue-rotate(calc(var(--x) * 80deg));
  animation: animate 10s linear infinite;
  animation-delay: calc(var(--x) * -2s);
}

/*匀速移动*/
@keyframes animate {
  0%,100% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(50px);
  }
}

.circular:nth-child(1) {
  width: 88px;
  height: 88px;
  top: 15%;
  left: 33%;
  border-radius: 44px;
  background-clip: padding-box;
}

.circular:nth-child(2) {
  width: 60px;
  height: 60px;
  top: 55%;
  left: 32%;
  z-index: 1;
  border-radius: 30px;
  background-clip: padding-box;
}

.circular:nth-child(3) {
  width: 80px;
  height: 80px;
  top: 77%;
  left: 44%;
  border-radius: 40px;
  background-clip: padding-box;
  z-index: 1;
}

.circular:nth-child(4) {
  width: 70px;
  height: 70px;
  top: 50%;
  left: 63%;
  border-radius: 35px;
  background-clip: padding-box;
}

.circular:nth-child(5) {
  width: 100px;
  height: 100px;
  top: 14%;
  left: 60%;
  z-index: 1;
  border-radius: 50px;
  background-clip: padding-box;
}

.form {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  /*阴影*/
  box-shadow: 0 0 25px #3c4242;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form input {
  height: 35px;
}

.form img {
  margin-bottom: -10px;
  margin-left: 5px;
}

.loginTitle {
  margin: 0 auto 15px auto;
  text-align: center;
  color: #3c8dbc;
}

.rememberMe {
  text-align: left;
  margin-top: -5px;
  margin-bottom: 10px;
}

.navigate {
  text-align: right;
  color: #8b8989;
  font-size: small;
  margin-top: -10px;
}
</style>
